<!-- 账户明细 -->
<template>
	<view class="user-bill">
		<view class="flex row-between">
			<view class="" style="width: 75%;">
				<u-tabs :list="tabsList" :is-scroll="false" :current="currentTab" :bold="false" :active-color="colorConfig.primary"
					@change="changeTab" 
					:height="60"
					:show-bar="false"
					:active-item-style="{'color':'#fff',
				                 'background':'linear-gradient(180deg, rgba(255, 44, 60, 1) 0%, rgba(249, 95, 47, 1) 100%)',
								  'font-weight': 600,
							      'border-radius': '10px'}"/>
				
			</view>
			
			
				<router-link to="/bundle/pages/add_queue/add_queue">
					<view class="add">
					+添加
					</view>
				</router-link>
				
	 </view>
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption"  @down="downCallback">			
			<view class="p-t-20 p-r-20" >
				<u-swipe-action :show="item.show" :index="index" 
							v-for="(item, index) in list" :key="item.id" 
							@click="click(item.id)" @open="open"
							:options="options"
							:disabled="item.status == 0?false:true"
						>
						<queue-cell :data="item"/>
				</u-swipe-action>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import { getQueueRecord,delQueue } from "@/api/user"
	
	export default {
		mixins: [MescrollMixin], // 使用mixin
		name:"queue-list",
		props:{	
		},
		data() {
			return {
				// Tabs 列表
				tabsList: [{
					name: '全部',
					value:'all',
				}, {
					name: '等待中',
					value:'in',
				}, {
					name: '已完成',
					value:'ok',
				}, {
					name: '已取消',
					value:'close',
				}],
				upOption: {
					empty: {
						icon: '/static/images/order_null.png',
						tip: '暂无记录', // 提示
					}
				},
				currentTab: 0,
				list: [], // 列表数据--全部
				type:'all',

				show: false,
				options: [
					{
						text: '取消',
						style: {
							backgroundColor: '#ffcb0e'
						}
					},
					
				]
			};
		},

		methods: {
			// 改变当前的Tabs位置
			changeTab(index) {
				this.currentTab = index;
				this.type = this.tabsList[index].value;
				this.list = []
				this.mescroll.resetUpScroll();
			},

			// 上拉加载 
			upCallback(page) {
				const pageNum = page.num; // 页码, 默认从1开始
				const pageSize = page.size; // 页长, 默认每页10条
				getQueueRecord({
					page_size: pageSize,
					page_no: pageNum,
					type: this.type
				}).then(({
					data
				}) => {
					console.log(data)
					if (page.num == 1) this.list = [];
					const curPageData = data.lists;
					const curPageLen = curPageData.length;
					const hasNext = !!data.more;
					this.list = this.list.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})

			},
			click(id) {
				
				delQueue({
					id: id
				}).then(({
					data
				}) => {
					this.mescroll.resetUpScroll();	
					
				}).catch(() => {
					this.mescroll.endErr()
				})
	
				
					
				},						// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			}
		}
	}
</script>

<style scoped>
	.user-bill{
		position: sticky;
		top: 0;
		z-index: 100;
		margin: 0 20rpx;
	}
	.add{
		width:120rpx;
		height:50rpx;
		border-radius:20rpx;
		line-height: 50rpx;
		text-align: center;
		background:linear-gradient(180deg, rgba(255, 44, 60, 1) 0%, rgba(249, 95, 47, 1) 100%);
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		margin-right:20rpx;
	}
</style>
